<script setup lang="js">
// const { proxy } = getCurrentInstance()
import { ref, getCurrentInstance, reactive } from "vue";
import StationStatus from './components/stationStatus.vue'
import StationDetails from './components/stationDetails.vue'
// const msg_op00 = ref('')
// const msg_op30 = ref('')

//const colorBind = ref('red');//动态变换颜色

// proxy.signalr.SR.on("op00", (data, data2) => {
//   console.log(data);
//   console.log((JSON.stringify(data)));
//   console.log(abcd);

//   // if(data2=="1"){
//   //   colorBind.value='green'
//   // }else{
//   //   colorBind.value='red'
//   // }
//   msg_op00.value = data
// })
// proxy.signalr.SR.on("op30", (data) => {
//   console.log(data);

//   msg_op30.value = data
// })

const urlList = {
  op01_url: 'sample/images/OP01.png',
  op30_url: 'sample/images/Cylindrical Wire/OP30-60.png',
  op80_url: 'sample/images/Cylindrical Wire/OP80.png',
  op90_url: 'sample/images/Cylindrical Wire/OP90.png',
  op110_url: 'sample/images/Cylindrical Wire/OP110.png',
  op120_url: 'sample/images/Cylindrical Wire/OP120.png',
  op130_url: 'sample/images/Cylindrical Wire/OP130.png',
  op140_url: 'sample/images/Cylindrical Wire/OP140.png',
  op180_url: 'sample/images/Cylindrical Wire/OP180.png',
  op170_url: 'sample/images/Cylindrical Wire/OP170.png',
  op85_st03_url: 'sample/images/OP85-ST03.png',
  op85_st04_url: 'sample/images/OP85-ST04.png',
  op85_st05_url: 'sample/images/OP85-ST05.png',
  op85_st06_url: 'sample/images/OP85-ST06.png',
  op85_st062_url: 'sample/images/OP85-ST062.png',
  op85_st07_url: 'sample/images/OP85-ST07.png',
  op85_st08_url: 'sample/images/OP85-ST08.png',
  op85_st09_url: 'sample/images/OP85-ST09.png',
  op85_st10_url: 'sample/images/OP85-ST10.png'
};


</script>



<template>
  <!-- <h1>{{ msg }}</h1> -->

  <div>
    <el-button type="primary" color="#F56C6C">停止</el-button>
    <el-button type="primary" color="#67C23A">运行</el-button>
    <el-button type="primary" color="#E6A23C">故障</el-button>
    <el-button type="primary" color="#303133">禁止</el-button>
  </div>

  <br><br>


  <div class="top-station">
    <el-row>
      <el-col :span="1.5">
        <div class="grid-content bg-purple">
          <div class="demo-image">
            <div class="block" style="width: 180px;">
              <div class="status-station">
                <StationStatus CurrentCode="OP30A" />
                <StationStatus CurrentCode="OP30B" />
                <!-- <el-button type="primary" class="btnStatus" id="el-button-status">OP00</el-button>
                <el-button type="primary" class="btnStatus" id="el-button-status">OP01</el-button> -->
              </div>
              <el-image style="height: 150px;width: 160px;" :src=urlList.op01_url fit="fill"></el-image>
              <div class="content-data-string">
                <!-- <p>{{ msg_op00 }}</p> -->
                <StationDetails CurrentCode="OP30" />
              </div>
            </div>

          </div>
        </div>
      </el-col>
      <el-col :span="1.5">
        <div class="grid-content bg-purple-light">
          <div class="demo-image">
            <div class="block" style="width: 150px;">
              <div class="status-station">
                <!-- <el-button type="primary" class="btnStatus" id="el-button-status">OP85</el-button> -->
                <StationStatus CurrentCode="OP40_50_60" />
              </div>
              <el-image style="height: 150px;width: 130px;" :src=urlList.op30_url fit="fill"></el-image>
              <div class="content-data-string">
                <!-- <p>{{ msg_op30 }}</p> -->
                <StationDetails CurrentCode="OP40_50_60" />
              </div>
            </div>

          </div>
        </div>
      </el-col>
      <el-col :span="2.5">
        <div class="grid-content bg-purple-light">
          <div class="demo-image">
            <div class="block" style="width: 150px;">
              <div class="status-station">
                <!-- <el-button type="primary" color="#F56C6C" id="el-button-status">OP95</el-button>
                <el-button type="primary" color="#F56C6C" id="el-button-status">OP95_2</el-button> -->
                <StationStatus CurrentCode="OP70" />
              </div>
              <el-image style="height: 150px;width: 130px;" :src=urlList.op80_url fit="fill"></el-image>
              <div class="content-data-string">
                <!-- <p>{{ msg_op00 }}</p> -->
                <StationDetails CurrentCode="OP70" />
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="1.5">
        <div class="grid-content bg-purple-light">
          <div class="demo-image">
            <div class="block" style="width: 180px;">
              <div class="status-station">
                <!-- <el-button type="primary" color="#F56C6C" id="el-button-status">OP100</el-button>
                <el-button type="primary" color="#F56C6C" id="el-button-status">OP100_2</el-button> -->
                <StationStatus CurrentCode="OP80A" />
                <StationStatus CurrentCode="OP80B" />
              </div>
              <el-image style="height: 150px;width: 160px;" :src=urlList.op90_url fit="fill"></el-image>
              <div class="content-data-string">
                <!-- <p>{{ msg_op00 }}</p> -->
                <StationDetails CurrentCode="OP80" />
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="1.5">
        <div class="grid-content bg-purple-light">
          <div class="demo-image">
            <div class="block" style="width: 180px;">
              <div class="status-station">
                <!-- <el-button type="primary" color="#F56C6C" id="el-button-status">OP105</el-button> -->
                <StationStatus CurrentCode="OP90_100A" />
                <StationStatus CurrentCode="OP90_100B" />
              </div>
              <el-image style="height: 150px;width: 160px;" :src=urlList.op110_url fit="fill"></el-image>
              <div class="content-data-string">
                <!-- <p>{{ msg_op00 }}</p> -->
                <StationDetails CurrentCode="OP90_100" />
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="1.5">
        <div class="grid-content bg-purple-light">
          <div class="demo-image">
            <div class="block" style="width: 170px;">
              <div class="status-station">
                <!-- <el-button type="primary" color="#F56C6C" id="el-button-status">OP110</el-button>
                <el-button type="primary" color="#F56C6C" id="el-button-status">OP110_2</el-button> -->
                <StationStatus CurrentCode="OP110A" />
                <StationStatus CurrentCode="OP110B" />
              </div>
              <el-image style="height: 150px;width: 150px;" :src=urlList.op120_url fit="fill"></el-image>
              <div class="content-data-string">
                <!-- <p>{{ msg_op00 }}</p> -->
                <StationDetails CurrentCode="OP110" />
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="1.5">
        <div class="grid-content bg-purple-light">
          <div class="demo-image">
            <div class="block" style="width: 200px;">
              <div class="status-station">
                <!-- <el-button type="primary" color="#F56C6C" id="el-button-status">OP115</el-button>
                <el-button type="primary" color="#F56C6C" id="el-button-status">OP115_2</el-button>
                <el-button type="primary" color="#F56C6C" id="el-button-status">OP115_3</el-button>
                <el-button type="primary" color="#F56C6C" id="el-button-status">OP115_4</el-button> -->
                <StationStatus CurrentCode="OP120A" />
                <StationStatus CurrentCode="OP120B" />
              </div>
              <el-image style="height: 150px;width: 180px;" :src=urlList.op130_url fit="fill"></el-image>
              <div class="content-data-string">
                <!-- <p>{{ msg_op00 }}</p> -->
                <StationDetails CurrentCode="OP120" />
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="2.5">
        <div class="grid-content bg-purple-light">
          <div class="demo-image">
            <div class="block" style="width: 220px;">
              <div class="status-station">
                <!-- <el-button type="primary" color="#F56C6C" id="el-button-status">OP120</el-button>
                <el-button type="primary" color="#F56C6C" id="el-button-status">OP125</el-button>
                <el-button type="primary" color="#F56C6C" id="el-button-status">OP120_2</el-button>
                <el-button type="primary" color="#F56C6C" id="el-button-status">OP125_2</el-button> -->
                <StationStatus CurrentCode="OP130A" />
                <StationStatus CurrentCode="OP130B" />
              </div>
              <el-image style="height: 150px;width: 200px;" :src=urlList.op140_url fit="fill"></el-image>
              <div class="content-data-string">
                <!-- <p>{{ msg_op80 }}</p> -->
                <StationDetails CurrentCode="OP130" />
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="2.5">
        <div class="grid-content bg-purple-light">
          <div class="demo-image">
            <div class="block" style="width: 250px;">
              <div class="status-station">
                <!-- <el-button type="primary" color="#F56C6C" id="el-button-status">OP130</el-button>
                <el-button type="primary" color="#F56C6C" id="el-button-status">OP130_2</el-button> -->
                <StationStatus CurrentCode="OP140_150_160A" />
                <StationStatus CurrentCode="OP140_150_160B" />
              </div>
              <el-image style="height: 150px;width: 230px;" :src=urlList.op170_url fit="fill"></el-image>
              <div class="content-data-string">
                <!-- <p>{{ msg_op80 }}</p> -->
                <StationDetails CurrentCode="OP140_150_160" />
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-purple-light">
          <div class="demo-image">
            <div class="block" style="width: 220px;">
              <div class="status-station">
                <!-- <el-button type="primary" color="#F56C6C" id="el-button-status">OP135</el-button> -->
                <StationStatus CurrentCode="OP170_180A" />
                <StationStatus CurrentCode="OP170_180B" />
              </div>
              <el-image style="height: 150px;width: 200px;" :src=urlList.op180_url fit="fill"></el-image>
              <div class="content-data-string">
                <!-- <p>{{ msg_op80 }}</p> -->
                <StationDetails CurrentCode="OP170_180" />
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>


  <div class="bottom-station">
    <el-row>
      <el-col :span="1.5">
        <div class="grid-content bg-purple">
          <div class="demo-image">
            <div class="block" style="width: 200px;">
              <div class="status-station">
                <!-- <el-button type="primary" color="#F56C6C" id="el-button-status">OP15</el-button> -->
                <StationStatus CurrentCode="OP190_1" />
                <StationStatus CurrentCode="OP190_2" />
              </div>
              <el-image style="height: 150px;width: 180px;" :src=urlList.op85_st03_url fit="fill"></el-image>
              <div class="content-data-string">
                <!-- <p>{{ msg_op00 }}</p> -->
                <StationDetails CurrentCode="OP190" />
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="1.5">
        <div class="grid-content bg-purple-light">
          <div class="demo-image">
            <div class="block" style="width: 170px;">
              <div class="status-station">
                <!-- <el-button type="primary" color="#F56C6C" id="el-button-status">OP20</el-button>
                <el-button type="primary" color="#F56C6C" id="el-button-status">OP20_2</el-button> -->
                <StationStatus CurrentCode="OP85-ST3" />
              </div>
              <el-image style="height: 150px;width: 150px;" :src=urlList.op85_st04_url fit="fill"></el-image>
              <div class="content-data-string">
                <!-- <p>{{ msg_op30 }}</p> -->
                <StationDetails CurrentCode="OP85-ST3" />
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="1.5">
        <div class="grid-content bg-purple-light">
          <div class="demo-image">
            <div class="block" style="width: 220px;">
              <div class="status-station">
                <!-- <el-button type="primary" color="#F56C6C" id="el-button-status">OP25</el-button>
                <el-button type="primary" color="#F56C6C" id="el-button-status">OP25_2</el-button> -->
                <StationStatus CurrentCode="OP85-ST4A" />
                <StationStatus CurrentCode="OP85-ST4B" />
              </div>
              <el-image style="height: 150px;width: 200px;" :src=urlList.op85_st05_url fit="fill"></el-image>
              <div class="content-data-string">
                <!-- <p>{{ msg_op80 }}</p> -->
                <StationDetails CurrentCode="OP85-ST4" />
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="1.5">
        <div class="grid-content bg-purple-light">
          <div class="demo-image">
            <div class="block" style="width: 200px;">
              <div class="status-station">
                <!-- <el-button type="primary" color="#F56C6C" id="el-button-status">OP30</el-button> -->
                <StationStatus CurrentCode="OP85-ST5A" />
                <StationStatus CurrentCode="OP85-ST5B" />
              </div>
              <el-image style="height: 150px;width: 180px;" :src=urlList.op85_st06_url fit="fill"></el-image>
              <div class="content-data-string">
                <!-- <p>{{ msg_op00 }}</p> -->
                <StationDetails CurrentCode="OP85-ST5" />
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="1.5">
        <div class="grid-content bg-purple-light">
          <div class="demo-image">
            <div class="block" style="width: 220px;">
              <div class="status-station">
                <!-- <el-button type="primary" color="#F56C6C" id="el-button-status">OP35</el-button> -->
                <StationStatus CurrentCode="OP85-ST6_1" />
                <StationStatus CurrentCode="OP85-ST6_2" />
              </div>
              <el-image style="height: 150px;width: 200px;" :src=urlList.op85_st062_url fit="fill"></el-image>
              <div class="content-data-string">
                <!-- <p>{{ msg_op00 }}</p> -->
                <StationDetails CurrentCode="OP85-ST6" />
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="1.5">
        <div class="grid-content bg-purple-light">
          <div class="demo-image">
            <div class="block" style="width: 220px;">
              <div class="status-station">
                <!-- <el-button type="primary" color="#F56C6C" id="el-button-status">OP45</el-button>
                <el-button type="primary" color="#F56C6C" id="el-button-status">OP45_2</el-button> -->
                <StationStatus CurrentCode="OP85-ST7A" />
                <StationStatus CurrentCode="OP85-ST7B" />
              </div>
              <el-image style="height: 150px;width: 200px;" :src=urlList.op85_st07_url fit="fill"></el-image>
              <div class="content-data-string">
                <!-- <p>{{ msg_op00 }}</p> -->
                <StationDetails CurrentCode="OP85-ST7" />
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="1.5">
        <div class="grid-content bg-purple-light">
          <div class="demo-image">
            <div class="block" style="width: 220px;">
              <div class="status-station">
                <!-- <el-button type="primary" color="#F56C6C" id="el-button-status">OP50</el-button>
                <el-button type="primary" color="#F56C6C" id="el-button-status">OP50_2</el-button> -->
                <StationStatus CurrentCode="OP85-ST8A" />
                <StationStatus CurrentCode="OP85-ST8B" />
              </div>
              <el-image style="height: 150px;width: 200px;" :src=urlList.op85_st08_url fit="fill"></el-image>
              <div class="content-data-string">
                <!-- <p>{{ msg_op00 }}</p> -->
                <StationDetails CurrentCode="OP85-ST8" />
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="1.5">
        <div class="grid-content bg-purple-light">
          <div class="demo-image">
            <div class="block" style="width: 220px;">
              <div class="status-station">
                <!-- <el-button type="primary" color="#F56C6C" id="el-button-status">OP55</el-button>
                <el-button type="primary" color="#F56C6C" id="el-button-status">OP55_2</el-button> -->
                <StationStatus CurrentCode="OP85-ST9A" />
                <StationStatus CurrentCode="OP85-ST9B" />
              </div>
              <el-image style="height: 150px;width: 200px;" :src=urlList.op85_st09_url fit="fill"></el-image>
              <div class="content-data-string">
                <!-- <p>{{ msg_op00 }}</p> -->
                <StationDetails CurrentCode="OP85-ST9" />
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-purple-light">
          <div class="demo-image">
            <div class="block" style="width: 220px;">
              <div class="status-station">
                <!-- <el-button type="primary" color="#F56C6C" id="el-button-status">OP60</el-button>
                <el-button type="primary" color="#F56C6C" id="el-button-status">OP60_2</el-button> -->
                <StationStatus CurrentCode="OP85-ST10A" />
                <StationStatus CurrentCode="OP85-ST10B" />
              </div>
              <el-image style="height: 150px;width: 200px;" :src=urlList.op85_st10_url fit="fill"></el-image>
              <div class="content-data-string">
                <!-- <p>{{ msg_op00 }}</p> -->
                <StationDetails CurrentCode="OP85-ST10" />
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>

</template>


<style>
.status-station {
  display: flex;
  flex-wrap: wrap;

}


.content-data-string {
  height: 240px;
  /* overflow: scroll; */
  word-wrap: break-word;
  font-size: 12px;
  border: none solid rgb(250, 248, 250);
}

.el-button#el-button-status {
  width: 65px;
  word-wrap: break-word;
  font-size: 8px;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
  height: 480px;
}

.bg-purple-dark {
  /* background: hwb(180 99% 1%); */
}

.bg-purple {
  /* background: #f7f7f8; */
}

.bg-purple-light {
  /* background: #e5e9f2; */
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

/* .demo-image{
  border: 1px solid red;
} */

.row-bg {
  padding: 10px 0;
  /* background-color: #f9fafc; */
}

.block {
  border: none solid hwb(295 0% 0%);
  padding: 10px;
  height: 200px;
}
</style>